<script setup lang="ts">
import FlexLeft from '@/components/Echart/flexGlobal/flexLeft.vue'
// 走马灯
import Carousel from '@/components/Carousel/Carousel.vue'
// 性别占比
import SexPie from '@/components/PermissionsModule/Performance/components/SexPie.vue'
// 区域新用户增涨趋势
import globalNewMemberLine from '@/components/PermissionsModule/Performance/components/globalNewMemberLine.vue'
// 全区会员年龄
import memberAgeInRegion from '@/components/PermissionsModule/Performance/components/memberAgeInRegion.vue'
// 各国家有效会员
import countryMember from '@/components/PermissionsModule/Performance/components/countryMember.vue'
// 全区会员级别
import memberLevelsCount from '@/components/PermissionsModule/Performance/components/memberLevelsCount.vue'
// 各国核心经销商
import countryCoreDealer from '@/components/PermissionsModule/Performance/components/countryCoreDealer.vue'
</script>

<template>
  <FlexLeft></FlexLeft>
  <Carousel class="carousel" :interval="5000">
    <SexPie />
    <globalNewMemberLine />
    <countryMember />
  </Carousel>
  <Carousel class="carousel" :interval="5000">
    <memberLevelsCount />
    <memberAgeInRegion />
    <countryCoreDealer />
  </Carousel>
</template>

<style lang="scss" scoped>
.carousel {
  width: 100%;

  :deep(.el-carousel__container) {
    height: 260px;
  }
}
</style>
